
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div id="div_compare_chart" style="width: 1000px;height:400px;"></div>
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'form'], function(){
        $ = layui.jquery;
        var layer = layui.layer
            ,form = layui.form ;
        // 初始化 费用比较
        var compareChart = echarts.init(document.getElementById('div_compare_chart'));
        // 费用比较---配置相关信息
        compareChart.setOption({
            title: {
                text: '房间营业额统计',
                left: 'center'
            },
            tooltip: {
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                name: '营业额统计',
                type: 'pie',
                itemStyle: {
                    // 阴影的大小
                    shadowBlur: 10,
                    // 阴影水平方向上的偏移
                    shadowOffsetX: 0,
                    // 阴影垂直方向上的偏移
                    shadowOffsetY: 0,
                    // 阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                },
                // roseType: 'angle',//设置为南丁格尔图，即饼的半径不一致
                radius: '80%',

            }]
        });
        // 动态加载的相关数据
        $.ajax({
            url: 'srBaoBiao',
            type: "post",
            async: true,//异步
            dataType: 'json',
            success: function (result) {

                var str1=[];
                if (result.code == 0) {
                    for (var i = 0; i < result.maps.length; i++) {

                        str1.push({
                            name:result.maps[i].typeName,
                            value:result.maps[i].a
                        });
                    }
                    compareChart.setOption({
                        series: [{
                            data: str1
                        }]
                    });
                } else
                {
                    layer.msg("服务器提示:" + result.msg);
                }
            },
            error: function () {
                layer.alert("error");
            }
        });
    });
</script>
</body>
</html>
